<template>
  <div class="wf-box">
    <van-nav-bar
      :title="hardText"
      left-text="返回"
      right-text="···"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="from-box">
      <van-form validate-first>
        <!-- 通过 validator 进行异步函数校验 -->
        <van-field
          v-model="phone"
          placeholder="手机号"
          @change="valueTest"
          :rules="[
            { validator: asyncValidator, message: '请输入正确的手机号' },
          ]"
        />
        <!-- 通过 validator 进行函数校验 -->
        <van-field
          v-model="userpass"
          type="password"
          placeholder="密码"
          @change="valueTest"
          :rules="[{ validator: validator, message: '请输入密码' }]"
        />

        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="onSubmit"
            :disabled="isDisabled"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      hardText: "登录",
      phone: "",
      userpass: "",
      isDisabled: true,
    };
  },
  methods: {
    ...mapActions(["userStore/loginAtion"]),
    onClickLeft() {
      // console.log("aaaa");
      Toast("没有上一个了");
    },
    onClickRight() {
      Toast("按钮");
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过

    //手机号验证规则
    asyncValidator(val) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(
            /^(((13[0-9])|(14[5-7])|(15[0-9])|(17[0-9])|(18[0-9]))+\d{8})$/.test(
              val
            )
          );
        }, 10);
      });
    },
    //输入密码验证
    validator(val) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(/^[0-9a-zA-Z]{6,16}$/.test(val));
        }, 10);
       
      });
    },
  
    //手机号密码输入框状态检测
    valueTest(){
      if((/^(((13[0-9])|(14[5-7])|(15[0-9])|(17[0-9])|(18[0-9]))+\d{8})$/.test(this.phone))&&(/^[0-9a-zA-Z]{6,16}$/.test(this.userpass))){
        this.isDisabled=false;
      }else {
        this.isDisabled=true;
      }
    },
    
    
    onSubmit() {
      // console.log("submit", this.phone, this.userpass);
      this.$http({
        url: "/driver/login",
        method: "POST",
        params: {
          phone: this.phone,
          pwd: this.userpass,
        },
      })
        .then((res) => {
          // console.log("请求成功", res.data);
          if (res.data.code == "1") {
            // console.log("登录成功", res.data.data);
            
      this["userStore/loginAtion"](res.data.data);
            Toast("登录成功");
            setTimeout(() => {
              this.$router.push("/");
            }, 500);
          } else if (res.data.code == "50006") {
            Toast("账号或密码错误");
            // console.log("登录失败", res.data.msg);
          }
        })
        .catch((err) => {
          Toast("网络连接超时")
          // console.log("网络连接超时", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.from-box {
  margin-top: 20px;
}
</style>